<template>
    <el-container>
        <el-header>
            <div class="operate">
                <div class="total" v-for="(item,index) in operate" :key="index" @click="filterBtn(item,index)" :class="item.state_id == state_id ? 'background' : ''">
                    <sc-status-indicator :type="item.src"></sc-status-indicator>
                    <span class="font">{{item.state}}{{item.total}}台</span>
                </div>
            </div>
            <div>
                <el-select v-model="show" placeholder="请选择" clearable suffix-icon="el-icon-CaretBottom" filterable @change="showChange">
                    <el-option :value="0" label="实时监测图形"></el-option>
                    <el-option :value="1" label="实时监测列表"></el-option>
                </el-select>
                <el-button @click="dialog.show = true">显示设置</el-button>
            </div>
        </el-header>
        <el-main class="nopadding" v-if="show==0">
            <div class="container" v-if="imgData.length!=0">
                <div class="listDetail" :style="'background-color:' + (item.state_id == 13 ? '#74d7a1' : (item.state_id==14 ?'#FF9C01':(item.state_id==15 ?'#F96164' : '#909399')))" v-for="(item,index) in imgData" :key="index" @dblclick="goDetail(item.device_id)">
                    <div class="imgAndText">
                        <img v-if="item.img" :src="item.img" />
                        <img v-else src="../../../assets/img/car.png" alt="">
                        <div class="text">设备代码 : {{item.code}}</div>
                        <div class="text">设备名称 : {{item.title}}</div>
                    </div>
                    <div class="contont" v-for="(item1,index1) in tableShow" :key="index1">
                        <div class="order">{{item1.chart_title}}： {{item[item1.field]}}</div>
                    </div>
                </div>
            </div>
            <el-empty style="height: 100%;" :image-size="200" v-else description="无目标设备" />
        </el-main>
        <el-footer v-if="show==0" style="height: 50px;padding: 9px 15px">
            <el-pagination background layout="total,sizes,prev, pager, next,jumper" small v-model:page-size="pageSize" :page-sizes="[10,20,30,50]" :total="Number(countSize)" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </el-footer>
        <el-main class="nopadding" v-if="show==1">
            <scTable ref="table" :apiObj="table" @selection-change="selectionChange" stripe remoteSort remoteFilter border>
                <el-table-column type="selection"  align="center" width="50"></el-table-column>
                <el-table-column label="设备编码" fixed prop="code" align="center" width="150"></el-table-column>
                <el-table-column label="设备名称" fixed prop="title" align="center"></el-table-column>
                <el-table-column v-for="(item,index) in tableShow" :key="index" :label="item.line_title" :prop="item.field" align="center"></el-table-column>
            </scTable>
        </el-main>
    </el-container>
    <el-dialog v-model="dialog.show" title="自定义显示列" :before-close="handleClose"  width="1100" align-center draggable>
        <sc-form-table ref="table" v-model="form.item" :addTemplate="addTemplate" placeholder="暂无数据" hideAdd hideDelete height="600">
            <el-table-column prop="val" label="原始字段名"> 
                <template #default="{row}">
                    <div>
                        {{row.field}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="val" label="图形名称">
                <template #default="scope">
                    <el-input v-model="scope.row.chart_title" placeholder="请输入内容"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="open" label="图形是否显示" width="80" align="center">
                <template #default="scope">
                    <el-switch v-model="scope.row.chart_show" :active-value="1" :inactive-value="0"></el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="val" label="表格名称">
                <template #default="scope">
                    <el-input v-model="scope.row.line_title" placeholder="请输入内容"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="open" label="列表是否显示" width="80" align="center">
                <template #default="scope">
                    <el-switch v-model="scope.row.line_show" :active-value="1" :inactive-value="0"></el-switch>
                </template>
            </el-table-column>
        </sc-form-table>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialog.show = false">取消</el-button>
                <el-button type="primary" @click="submit" :loading="isSaveing">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
import scSelectFilter from '@/components/scSelectFilter'
export default {
    name: 'selectFilter',
    components: {
        scSelectFilter
    },
    data() {
        return {
            dialog:{
                show:false
            },
            search:{
                state_id:null
            },
            form:{
                type:3,
                item:[],
            },
            show:0,
            addTemplate:{},
            operate:[],
            tableShow:[],
            imgData:[],
            table:this.$API.jiankong.getMonitor.tableImg,
            countSize:'',
            pageSize:20,
            state_id:""
        };
    },
    mounted() {
        this.getList()
        this.getImgAndTable()
    },
    methods: {
        // 双击详情
        goDetail(e){
            this.$router.push({
                path:'/jiankong/device/detail',
                query:{
                    id:e
                }
            })
        },
        filterBtnAll(){
            this.getImgAndTable(0)
        },
        // 获取表，图片列表
        async getImgAndTable(e){
            var res = await this.$API.jiankong.getMonitor.tableImg.get({type:this.show,pageSize:20,state_id:e});
            this.operate = res.data.statistics
            this.tableShow = res.data.table
            this.imgData = res.data.rows
            this.countSize = res.data.total 
        },
        // 分页每页数量
        async handleSizeChange(size){
            this.pageSize = size
            var res = await this.$API.jiankong.getMonitor.tableImg.get({type:this.show,pageSize:size,state_id:this.state_id});
            this.operate = res.data.statistics
            this.tableShow = res.data.table
            this.imgData = res.data.rows
        },
        // 分页操作
        async handleCurrentChange(currentPage) {
            var res = await this.$API.jiankong.getMonitor.tableImg.get({type:this.show,page:currentPage,pageSize:this.pageSize,state_id:this.state_id});
            this.operate = res.data.statistics
            this.tableShow = res.data.table
            this.imgData = res.data.rows
        },
        // 获取展示字段列表
        async getList(){
            var res = await this.$API.all.getEqudateField.get();
            let array = []
            res.data.map(item=>{
                array.push({
                    chart_show:item.chart_show,
                    line_show:item.line_show,
                    line_title:item.line_title,
                    chart_title:item.chart_title,
                    field:item.field,
                    id:item.id,
                })
            })
            this.form.item = array
        },
        // 提交需要展示的列
        async submit() {
            var res = [];
            res = await this.$API.jiankong.getMonitor.edit.post(this.form);
            if (res.code == 1) {
                this.$message.success("操作成功")
                this.dialog.show = false
                this.getImgAndTable()
            } else {
                this.$alert(res.message, "提示", { type: 'error' })
            }
		},
        // 切换展示图片还是列表
        showChange(e){
            this.show = e
            this.getImgAndTable()
        },
        filterBtn(item,index){
            console.log('index :>> ', index);
            this.state_id = item.state_id
            this.search.state_id = item.state_id
            if(this.show==0){
                this.getImgAndTable(item.state_id)
            }else{
                this.$refs.table.upData(this.search)
            }
        },
    },
};
</script>

<style scoped lang="scss">
div{
    user-select: none;
}
.operate {
    display: flex;
    align-items: center;
    div {
        display: flex;
        align-items: center;
        border-radius: 30px;
        border: 1px solid #e2e2e2;
        font-size: 14px;
        padding: 9px 17px;
        margin: 0 5px;
        cursor: pointer;
        .font {
        margin-left: 5px;
        }
    }
}
.container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .listDetail {
    margin: 9px;
    background: #f9d180;
    padding: 11px 16px;
    width: 225px;
    box-shadow: 1px 5px 8px 0px rgba(196, 196, 196, 0.13);
    border-radius: 10px;
    cursor: pointer;
    .imgAndText {
        border-bottom: 1px solid #ececec;
        img {
            width: 186px;
            height: 81px;
        }
        .text {
            padding: 6px 0;
            font-size: 14px;
            font-weight: 600;
            color: #000000;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
    .contont {
        padding-top: 6px;
        font-size: 14px;
        color: #333;
        .order {
            padding: 2px 0;
        }
    }
  }
}
.background {
    color: #FFF;
    border: 1px solid #73b800;
    background: #409eff;
}
</style>
